<template>
  <div class="w-full">
    <div class="p-9 bg-white rounded-[6px] flex items-center mb-8">
      <img class="mr-8 w-20 h-20" src="../../assets/images/fail.png" alt="">
      <div class="flex-1">
        <div class="text-custom-text text-[24px] font-[600] leading-8 mb-4 flex items-center justify-between">
          <div class="flex">
            <span> 本次闯关未成功 </span>
            <div class="AI-btn" @click="navigateToConversation" v-if="isShowToAI && !progressList.length">
              进行AI智能分析({{ countDown }}s)
            </div>
          </div>
          <div>
            <Button class="mr-4" @click="handleReExam">重新考核</Button>
            <Button @click="goBack">返回</Button>
          </div>
        </div>
        <div class="rounded-[6px] bg-[#FAFAFA] px-6 py-4 flex">
          <div class="flex justify-between flex-col mr-4">
            <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">岗位</div>
            <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">{{ assessResultData.job }}
            </div>
          </div>
          <div class="flex justify-between flex-col mr-4">
            <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">考核名称</div>
            <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">
              {{ assessResultData.chapter_name }}</div>
          </div>
          <div class="flex justify-between flex-col mr-4">
            <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">考核时间</div>
            <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">
              {{ filterTime(assessResultData.exam_time) }}</div>
          </div>
          <div class="flex justify-between flex-col mr-4">
            <div class="text-custom-text-45 text-[14px] font-[400] leading-[22px] text-left">考核得分</div>
            <div class="text-custom-text-65 text-[14px] font-[400] leading-[22px] text-left">{{ assessResultData.score }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="overflow-auto" style="height: calc(100% - 232px);">
      <div class="before:content-[' ']
            before:inline-block 
            before:w-1 before:h-4
            rounded-[1px] 
            before:bg-[#33A0FF] before:bg-gradient-to-b from-[#9DD1FF] to-[#33A0FF]
            before:mr-2 text-[18px] font-[500] leading-[26px] text-custom-text
            flex items-center mb-4">课程推荐
      </div>
      <courseCard :cardParams="{
        points: assessResultData.error_points ? assessResultData.error_points.join(',') : ''
      }"></courseCard>
    </div>
  </div>
</template>
<script setup>
import courseCard from './components/courseCard.vue'
import { useToResetAssess } from '@/hooks/userToAssess.js'
import { useRoute, useRouter } from 'vue-router'
import { ref, computed, onMounted, onUnmounted } from "vue";
import { StorageUtil } from "@/utils/common.js";
import { userApi } from "@/api/index.js";
import { useUserStore } from "@/stores/user.js";

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()
const countDown = ref(5)
const progressList = ref([])
const { paperId, chapterId, testId } = route.query
const assessResultData = computed(() => {
  return StorageUtil.session.get('assessResultData')
})
const isShowToAI = computed(() => {
  const info = userStore.userInfo
  return info.user_type != '2' && info.user_type != '3' && info.user_type != '4' && info.user_type != '5'
});
let timer = null
onMounted(() => {
  getPaperRecord()
})

const getPaperRecord = () => {
  userApi.getStudentchapterRecord(testId).then(data => {
    progressList.value = data.filter(item => item.status == 0)
    if (!progressList.value.length) {
      startCountDown()
    }
  })
}
const filterTime = (exam_time) => {
  if (exam_time && Array.isArray(exam_time) && exam_time.length === 2) {
    let start = exam_time[0];
    let end = exam_time[1].split(' ')[1];
    let result = `${start} - ${end}`;
    return result
  } else {
    return '-'
  }
}
const handleReExam = () => {
  useToResetAssess(testId)
  router.push({
    path: '/examCourses/chapterDetail',
    query: {
      paperId,
      chapterId
    }
  })
}


// 开始倒计时
const startCountDown = () => {
  // 重置倒计时
  countDown.value = 5
  // 清除可能存在的定时器
  if (timer) {
    clearInterval(timer)
  }

  // 开始5秒倒计时
  timer = setInterval(() => {
    countDown.value--
    if (countDown.value <= 0) {
      clearInterval(timer)
      navigateToConversation()
    }
  }, 1000)
}

// 跳转到会话页面
const navigateToConversation = () => {
  clearInterval(timer)
  sessionStorage.setItem('defaultDialog', JSON.stringify({
    text: '最近一次考核情况',
    testId: testId
  }))
  router.push({
    path: '/conversation',
    query: {}
  })
}

const goBack = () => {
  router.go(-2)
}

// 组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>
<style lang="scss" scoped>
.AI-btn{
  width: 153px;
  line-height: 32px;
  background: linear-gradient( 90deg, #59D3D7 0%, #0098FF 100%);
  border-radius: 6px 6px 6px 6px;
  font-size: 14px;
  color: #FFFFFF;
  text-align: center;
  margin-left: 10px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    opacity: 0.9;
  }
}
</style>